<script>
    $(document).ready(function(){ 
						   
	$(function() {
		$("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
			var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
			$.post("<?php echo $_Q_module_path ?>updateDB.php", order, function(theResponse){
				$("#contentRight").html(theResponse);
			}); 															 
		}								  
		});
	});

});	
</script>
<div id="contentWrap">

		<div id="contentTop">
		  <p>To read more &amp; download the demo files:		    <a href="http://www.webresourcesdepot.com/dynamic-dragn-drop-with-jquery-and-php">Dynamic Drag’n Drop With jQuery And PHP</a><br />
		  </p>
		  <p>Drag'n drop the items below. Their new positions are updated in the database with an Ajax request in the backend.<img src="<?echo $_Q_page; ?>images/arrow-down.png" alt="Arrow Down" width="32" height="32" /></p>
	  </div>
	
		<div id="contentLeft">
			<ul>
				<?php
				$query  = "SELECT * FROM records ORDER BY recordListingID ASC";
				$result = mysql_query($query);
				
				while($row = mysql_fetch_array($result, MYSQL_ASSOC)){?>
					<li id="recordsArray_<?php echo $row['recordID']; ?>"><?php echo $row['recordID'] . ". " . $row['recordText']; ?></li>
				<?php } ?>
			</ul>
		</div>
		
		<div id="contentRight">
		  <p>Array will be displayed here.</p>
		  <p>&nbsp; </p>
		</div>
	
	</div>

